<template>
  <div>
  <div>
    <el-divider content-position="left" >
      <b style="color: #67C23A">绿钻会员查询到账模块</b>
    </el-divider>
  <el-form :model="queryForm" label-width="100px" class="demo-queryForm" ref="clickForm">
    <el-form-item label="订单号" prop="orderNo">
      <el-input  v-model="queryForm.orderNo" ></el-input>
    </el-form-item>
    <el-form-item label="下单时间" prop="time">
      <el-input  v-model="queryForm.time" ></el-input>示例时间格式：20240116
    </el-form-item>

    <el-form-item label="查询类型">
      <el-select v-model="queryForm.type"  placeholder="查询类型">
        <el-option label="QQ音乐（预付费）" value="1"></el-option>
        <el-option label="QQ音乐（大促活动）" value="2"></el-option>
      </el-select>
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click="queryToForm()">提交</el-button>
      <el-button @click="clickXiaomiForm">重置</el-button>
      <el-dialog title="发货详情" :visible.sync="wicket" >
        <el-form >
          <el-form-item label="昵称" >
            <el-input v-model="nick" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="状态" >
            <el-input v-model="orderStatus" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户账号" >
            <el-input v-model="userId" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="音乐账号" >
            <el-input v-model="musicId" autocomplete="off" disabled></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-form-item>
  </el-form>
  </div>

    <!------------>
    <div>
      <el-divider content-position="left" >
        <b style="color: #67C23A">小米官方凭证查询</b>
      </el-divider>
      <el-form :model="xiaomiForm" label-width="100px" class="demo-queryForm" ref="clickForm">
        <el-form-item label="订单号" prop="orderNo">
          <el-input  v-model="xiaomiForm.orderNo" ></el-input>
        </el-form-item>

        <!--src="../../../assets/jn_images/xiaomi.jpg"-->
        <el-form-item>
          <el-button type="primary" @click="xiaomiToForm()">提交</el-button>
          <el-button @click="clickXiaomiForm">重置</el-button>
          <el-dialog class="custom-header-dialog" title="发货详情" :visible.sync="xiaomiWicket"  >
            <el-form >
              <el-form-item label="小米ID" >
                <el-input v-model="xiaomiData.xiaomi_id" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="状态" >
                <el-input v-model="xiaomiData.status" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="手机号" >
                <el-input v-model="xiaomiData.phone" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="创建时间" >
                <el-input v-model="xiaomiData.create_time" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="激活时间" >
                <el-input v-model="xiaomiData.active_time" autocomplete="off" disabled></el-input>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-form-item>
      </el-form>
    </div>


    <div>
      <el-divider content-position="left" >
        <b style="color: #67C23A">奈雪券码状态查询</b>
      </el-divider>
      <el-form :model="NXForm" label-width="100px" class="demo-queryForm" ref="clickForm">
        <el-form-item label="电话号码" prop="phone">
          <el-input  v-model="NXForm.phone" ></el-input>
        </el-form-item>

        <el-form-item label="券码" prop="couponCode">
          <el-input  v-model="NXForm.couponCode" ></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="NXToForm()">提交</el-button>
          <el-button @click="clickNXForm">重置</el-button>
          <el-dialog title="发货详情" :visible.sync="NXWicket"  >
            <el-form >
              <el-form-item label="券码" >
                <el-input v-model="NXData.couponCode" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="手机号" >
                <el-input v-model="NXData.phone" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="状态" >
                <el-input v-model="NXData.status" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="转赠状态" >
                <el-input v-model="NXData.giveStatus" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="生效时间" >
                <el-input v-model="NXData.validStart" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="过期时间" >
                <el-input v-model="NXData.validEnds" autocomplete="off" disabled></el-input>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-form-item>
      </el-form>
    </div>


  </div>
</template>
<script>
import axios from 'axios'
export default {


  data() {
    return {
      restaurants: [],


      wicket: false,
      xiaomiWicket: false,
      NXWicket: false,

      nick: '',
      orderStatus: '',
      userId:'',
      musicId:'',

      xiaomiData:{
        xiaomi_id:'',
        status:'',
        phone:'',
        create_time:'',
        active_time:'',
      },

      NXData:{
        phone:'',
        couponCode:'',
        status:'',
        giveStatus:'',
        validStart:'',
        validEnds:'',
      },

      ruleForm: {
        appId: '',
        key: '',
        productId: '',
        account: '',
        orderNoR:''
      },
      queryForm:{
        orderNo:'',
        time:'',
        type:''
    },
      xiaomiForm:{
        orderNo:''
      },
      NXForm:{
        phone:'',
        couponCode:''
      },
    };
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },

    loadAll() {
      axios.get('http://47.110.49.47:9080/system/xc/loadList').then(res=>{
        var code = res.data.code;
        var msg = res.data.msg;
        console.log(res.data.data)
        if(code==200){
          this.restaurants = res.data.data;
          for (let i = 0; i < this.restaurants.length; i++) {
            // 获取当前对象的 accountTitle 属性
            const agentCode = this.restaurants[i].agentCode;
            const secretKey = this.restaurants[i].secretKey;
            const agentName = this.restaurants[i].agentName;
            if (agentName) {
              this.restaurants[i].value = agentCode;
              this.restaurants[i].text = agentName;
              this.restaurants[i].key = secretKey;//account
              // 删除原来的 accountTitle 属性
              delete this.restaurants[i].agentCode;
            }
          }
          return this.restaurants;
        }
      })
    },
    handleSelect(item) {
     this.ruleForm.key = item.key;
    },
    submitForm() {
      const data = {
        appId: this.ruleForm.appId,
        key:this.ruleForm.key,
        productId: this.ruleForm.productId,
        account: this.ruleForm.account
      };
      console.log(data)
      // 发送POST请求
      axios.post('http://47.110.49.47:8098/fujian-mobile-order-vt/submitTest', data)
        .then(res => {
          if (res.data.code ==200){
            this.ruleForm.orderNoR = res.data.data.orderNo;
            this.$modal.msgSuccess(res.data.data.sta);
          }else {
            this.$modal.msgSuccess(res.data.message);
          }
          // 根据需要处理响应数据
        })
        .catch(error => {
          console.error(error);
          // 根据需要处理错误
          alert("请求失败")
        });
    },

    querySubForm(){
      const data = {
        appId: this.ruleForm.appId,
        key:this.ruleForm.key,
        orderNo: this.ruleForm.orderNoR
      };
      console.log(data)
      // 发送POST请求
      axios.post('http://47.110.49.47:8098/fujian-mobile-order-vt/orderQuery', data)
        .then(res => {
          this.$modal.msgSuccess(res.data);
          // 根据需要处理响应数据
        })
        .catch(error => {
          console.error(error);
          // 根据需要处理错误
          alert("请求失败")
        });
    },
    xiaomiToForm(){
      const orderNo = this.xiaomiForm.orderNo;
      if (orderNo===''){
        alert("订单号必填")
        return ;
      }
      axios.get('http://47.110.49.47:8098/fujian-mobile-order-vt/xiaomi/order/'+orderNo).then(res =>{
        if (res.data.code === "200"){
          this.xiaomiData =  res.data.data;
          this.xiaomiWicket = true
        }else {
          this.$modal.msgError("未查询到相关数据，请检查参数是否正确");
        }
      }).catch(error=>{
        alert("请求失败")
      })
    },

    NXToForm(){
      const phone = this.NXForm.phone;
      const couponCode = this.NXForm.couponCode;
      if (phone===''){
        alert("手机号必填")
        return ;
      }
      if (couponCode===''){
        alert("券码必填")
        return ;
      }
      axios.post('http://47.110.49.47:8098/NX-order-vt/NX/order/',this.NXForm).then(res =>{
        if (res.data.success){
          this.NXData =  res.data.data;
          this.NXWicket = true
        }else {
          this.$modal.msgError("未查询到相关数据，请检查参数是否正确");
        }
      }).catch(error=>{
        alert("请求失败")
      })
    },

    queryToForm() {
      const data = {
        orderNo: this.queryForm.orderNo,
        time:this.queryForm.time,
        type:this.queryForm.type,
      };
      console.log(data)
      axios.post('http://47.110.49.47:8098/fujian-mobile-order-vt/qqMusicQuery', data)
        .then(res => {
        if (res.data.code === "200"){
          this.nick = res.data.data.nick;
          this.orderStatus = res.data.data.orderStatus;
          this.userId =  res.data.data.userId;
          this.musicId = res.data.data.musicId;
          this.wicket = true
          //this.$modal.msgSuccess();
        }else {
          this.$modal.msgError("未查询到相关数据，请检查参数是否正确");
        }
        })
        .catch(error => {
          // 根据需要处理错误
          alert("请求失败")
        });

    },

    clickForm(){
      this.queryForm.type='';
      this.$refs.clickForm.resetFields();
    },
    clickXiaomiForm(){
      this.xiaomiForm.orderNo='';
    },
    clickNXForm(){
      this.NXForm.phone='';
      this.NXForm.couponCode='';
    },
    resetForm() {
      this.ruleForm.orderNoR = '';
      this.$refs.resetForm.resetFields();
    },
    xyForm(){
      this.queryParams.goodsId = '';
      this.queryParams.name = '';
      this.queryParams.productId = '';
      this.$refs.queryXYForm.resetFields();
    }
  }
}
</script>
<style>
.custom-header-dialog .el-dialog__header {
  background-image: url('../../../assets/jn_images/xiaomi.jpg');
  background-size: 120px;
  background-position: 50px;
  padding: 35px 10px; /* 上下内边距缩小 */
  border-radius: 4px 4px 0 0;
  height: auto; /* 移除固定高度 */
  background-repeat: no-repeat;
}
.custom-header-dialog .el-dialog__body {
  padding: 10px 20px 20px;
}

.custom-header-dialog .el-dialog__title {
  text-align: center;
  width: 100%;
  display: block;
  color: #1f0d0d;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  font-size: 35px;
}

/* 关闭按钮颜色适配 */
.custom-header-dialog .el-dialog__headerbtn .el-dialog__close {
  color: #2b2525;
}

</style>
